<template>
	<view class="detail">
		<image class="shop_img" :src="detailList[0]?.large_img" mode="widthFix"></image>
		<view class="shop_detail">
			<view class="top">
				<view class="title">
					<text>{{detailList[0]?.name}}</text>
				</view>
				<view class="text">
					<text>{{detailList[0]?.desc}}</text>
				</view>
			</view>
			<view class="bottom">
				<view class="box">
					<text class="left">糖度</text>
					<radio-group @change="radioChange" class="right">
						<label class="radio">
							<radio value="全糖" checked=true />
							<text>全糖</text>
						</label>
						<label class="radio">
							<radio value="半糖"/>
							<text>半糖</text>
						</label>
					</radio-group>
				</view>
				<view class="box">
					<text class="left">温度</text>
					<radio-group @change="radioChange" class="right">
						<label class="radio">
							<radio value="冷" checked=true />
							<text>冷</text>
						</label>
						<label class="radio">
							<radio value="热"/>
							<text>热</text>
						</label>
					</radio-group>
					<view class="collect" @click="AddCollectFn">
						<image src="../../static/assets/collect.png" mode="widthFix" v-if="!isCollect"></image>
						<image src="../../static/assets/collect_on.png" mode="widthFix" v-else></image>
						<view class="collect_text">
							<text>保存口味</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cart">
				<view class="top">
					<view class="left">
						<text class="l-num">￥{{detailList[0]?.price}}</text>
						<text class="l-text">一口价</text>
					</view>
					<view class="right">
						<view class="r-left">
							<text @click="fewCount">-</text>
						</view>
						<view class="r-center">
							<text>{{count}}</text>
						</view>
						<view class="r-right">
							<text @click="addCount">+</text>
						</view>
					</view>
				</view>
				<view class="bottom" >
					<view class="b_btn">
						<button class="btn" @click="AddShopcartFn">加入购物车</button>
						<button class="btn" @click="DeleteShopcartFn">删除购物车</button>
					</view>
					<view class="add">
						<button class="btn" @click="PayFn">加入订单</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { detailFn,addCollectFn,isCollectFn,addShopcartFn,deleteShopcartFn,payFn } from '../../api/index.js'
	export default {
		data() {
			return {
				pid:"",
				detailList:[],
				token:"",
				isCollect:false,
				rule:"无糖/默认奶油",
				count:0,
				sid:""
			}
		},
		onLoad(options) {
			let pid = options.pid;
			// console.log(pid);
			this.pid = pid;
			// let _this = this;
			// uni.getStorage({
			// 	key: 'token',
			// 	success: function (res) {
			// 		// console.log(res.data);
			// 		if(res.data != ''){
			// 			_this.token = res.data;
			// 		}
			// 	}
			// });
			this.token = uni.getStorageSync('token');
			// console.log(this.token);
			this.DetailFn();
			this.IsCollectFn();
		},
		onShow() {
			// let _this = this;
			// uni.getStorage({
			// 	key: 'token',
			// 	success: function (res) {
			// 		// console.log(res.data);
			// 		if(res.data != ''){
			// 			_this.token = res.data;
			// 		}
			// 	}
			// });
			this.token = uni.getStorageSync('token');
			// console.log(this.token);
			this.DetailFn();
			this.IsCollectFn();
		},
		methods: {
			async DetailFn(){
				await detailFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					pid:this.pid
				})
				.then(
					content=>{
						// console.log(content);
						let {code,result} = content;
						if(code == 600){
							this.detailList = result;
						}
					}
				)
			},
			radioChange(event) {
				console.log('选中的值：', event.detail.value);
			},
			async AddCollectFn(){
				await addCollectFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					pid:this.pid,
					tokenString:this.token
				})
				.then(
					content=>{
						// console.log(content);
						let {code,msg} = content;
						if(code ==800){
							this.IsCollectFn();
							uni.showToast({
								title:"收藏成功",
								duration:2000
							})
						}
					}
				)
			},
			async IsCollectFn(){
				await isCollectFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					pid:this.pid,
					tokenString:this.token
				})
				.then(
					content=>{
						// console.log(content);
						let {code,msg,result} = content;
						if(code == 1000 && result.length != 0){
							this.isCollect = true;
						}
					}
				)
			},
			addCount(){
				this.count ++;
			},
			fewCount(){
				this.count --;
			},
			async AddShopcartFn(){
				await addShopcartFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					pid:this.pid,
					tokenString:this.token,
					count:this.count,
					rule:this.rule
				})
				.then(
					content=>{
						console.log(content);
						let {code,sid,msg,status} = content;
						if(code == 3000){
							this.sid = sid;
						}
					}
				)
			},
			async DeleteShopcartFn(){
				await deleteShopcartFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					tokenString:this.token,
					sids:JSON.stringify([this.sid])
				})
				.then(
					content=>{
						console.log(content);
						let {code,msg} = content;
						if(code == 7000){
							uni.showToast({
								title:"删除成功",
								duration:2000
							})
						}
					}
				)
			},
			async PayFn(){
				await payFn({
					appkey:"U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
					tokenString:this.token,
					sids:JSON.stringify([this.sid]),
					phone:'18320111076',
					address:"翻斗花园",
					receiver:"北街细雨"
				})
				.then(
					content=>{
						console.log(content);
					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		.shop_img{
			width: 100%;
		}
		.shop_detail{
			margin: 20rpx;
			// border: 1px solid black;
			.top{
				margin-bottom: 20rpx;
				.title{
					font-size: 40rpx;
					font-weight: bold;
				}
				.text{
					font-size: 26rpx;
					color: #ccc;
					margin-top: 10rpx;
				}
			}
			.bottom{
				.box{
					display: flex;
					margin-bottom: 10rpx;
					.left{
						margin-right: 100rpx;
					}
					.right{
						.radio{
							margin-right: 50rpx;
						}
					}
					.collect{
						margin-left: 100rpx;
						text-align: center;
						image{
							width: 50rpx;
						}
						.collect_text{
							color: #ccc;
							font-size: 24rpx;
						}
					}
				}
			}
			.cart{
				.top{
					display: flex;
					justify-content: space-between;
					.left{
						margin-left: 20rpx;
						.l-num{
							color: red;
							font-size: 36rpx;
						}
						.l-text{
							color: red;
							font-size: 30rpx;
						}
					}
					.right{
						display: flex;
						// border: 1px solid black;
						.r-left{
							width: 40rpx;
							height: 40rpx;
							border: 1px solid #292b74;
							color: #292b74;
							text-align: center;
							line-height: 40rpx;
							border-radius: 50%;
						}
						.r-center{
							margin: 0 20rpx;
						}
						.r-right{
							line-height: 40rpx;
							border-radius: 50%;
							text-align: center;
							margin-right: 20rpx;
							width: 40rpx;
							height: 40rpx;
							color: #fff;
							background-color: #292b74;
						}
					}
				}
				.bottom{
					.b_btn{
						display: flex;
						.btn{
							background-color: #292b74;
							color: #fff;
							border-radius: 92rpx;
						}
					}
					.add{
						margin-top: 20rpx;
						.btn{
							background-color: #292b74;
							color: #fff;
							border-radius: 92rpx;
						}
					}
				}
			}
		}
	}
</style>
